<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滚动式轮播图</title>
		<script src="../jQuery/jquery-3.7.1.js"></script>
		<!-- 自己的js代码要用到jQuery，所以需要先引入jQuery -->
		<script src="js/banner.js"></script>
		<link rel="stylesheet" href="css/banner.css"/>
	</head>
	<body>
		<div id="banner">
			<!-- 4张图片 -->
			<ul id="imgList">
				<li><a><img src="img/1.jpg"/></a></li>
				<li><a><img src="img/2.webp"/></a></li>
				<li><a><img src="img/3.jpg"/></a></li>
				<li><a><img src="img/4.webp"/></a></li>
				<!-- 空白的替补 -->
				<li><a><img src="img/1.jpg"/></a></li>
			</ul>
			<!-- 2个左右切换的按钮 -->
			<p class="left" onclick="prev()">《</p>
			<p class="right" onclick="next()">》</p>
			<!-- 4个圆圈按钮 -->
			<ul id="icoList">
				<!-- 点击后切换到相应的图片 -->
				<li><p onclick="changeImg(0)">1</p></li>
				<li><p onclick="changeImg(1)">2</p></li>
				<li><p onclick="changeImg(2)">3</p></li>
				<li><p onclick="changeImg(3)">4</p></li>
			</ul>
		</div>
	</body>
</html>